<template>
  <p-drawer
    placement="right"
    :closable="false"
    width="calc(100vw - 200px)"
    :visible="visible"
    :mask-closable="false"
    :destroy-on-close="true"
    @close="onClose"
  >
    <div style="position: relative">
      <TaskTitle :icon-name="iconName" :title-name="titleName" :color="color" />
      <p-button
        v-if="isEdit || !addState"
        class="commonbutton edit"
        type="primary"
        @click="edit"
      >
        编辑
      </p-button>
    </div>
    <div class="g-drawer-list-container" style="overflow-x: hidden">
      <TitleSecondary title="基本信息" />
      <AddOrderForm
        ref="form"
        :form="form"
        :is-foot="isFoot"
        :add-state="addState"
        :delete-file-id.sync="deleteFileId"
        :parent-id="parentId"
        :is-get-info="isGetInfo"
      />
    </div>
    <ButtonGroup
      class="g-drawer-footer"
      :options="footerButtons"
      @click="handleButtonClick"
    />
  </p-drawer>
</template>

<script>
import monent from 'moment';
import AddOrderForm from './AddOrderForm.vue';
import { postAddOrder, postDeleteFile } from '@/api/order.js';
import { getUserGroup, getCurrentUser } from '@/api/public.js';

const defaultForm = {
  id: '',
  orderNo: '',
  salesOrgCode: '',
  salesGroupName: '',
  salesGroupCode: '',
  customerName: '',
  customerCode: '',
  opportunityName: '',
  opportunityNo: '',
  legalNo: '',
  legalName: '',
  modelName: '',
  application: '',
  quantity: '',
  unitPrice: '',
  lumpSum: '',
  orderTime: '',
  remark: '',
  createUserName: '',
  updateTime: '',
  updateUserName: '',
  createTime: '',
  updateUserGroup: '',
  createUserGroup: '',
  attachmentList: [],
  logList: [],
};
export default {
  components: {
    AddOrderForm,
  },
  // mixins: [DrawerMixin],
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    addState: {
      type: Boolean,
      default: false,
    },
    detail: {
      type: Object,
      default: () => ({}),
    },
    isFoot: {
      type: Boolean,
      default: false,
    },
    titleInfo: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      form: {
        ...defaultForm,
      },
      titleName: '订单详情',
      color: 'green',
      iconName: 'Det',
      planIdNew: undefined,
      saleList: [],
      isEdit: false,
      isSave: false,
      deleteFileId: [],
      parentId: '',
      isGetInfo: false,
    };
  },

  computed: {
    uid() {
      return this.$store.state.user.uid;
    },
    footerButtons() {
      const buttons = this.addState
        ? [
            {
              key: 'save',
              type: 'primary',
              label: '保存',
              auth: true,
            },
            {
              key: 'close',
              label: '返回',
            },
          ]
        : [
            {
              key: 'close',
              label: '返回',
            },
          ];
      return buttons;
    },
  },
  watch: {
    visible: {
      handler(val) {
        if (!val) return;
        if (!this.addState) {
          const plan = this.detail || {};
          this.isGetInfo = true;
          this.isEdit = true;
          this.parentId = plan.salesOrgCode;
          this.form = {
            id: plan.id || '',
            orderNo: plan.orderNo || '',
            salesOrgCode: plan.salesOrgCode || '',
            salesGroupCode: plan.salesGroupCode || '',
            salesGroupName: plan.salesGroupName || '',
            customerName: plan.customerName || '',
            customerCode: plan.customerCode || '',
            opportunityName: plan.opportunityName || '',
            opportunityNo: plan.opportunityNo || '',
            legalNo: plan.legalNo || '',
            legalName: plan.legalName || '',
            modelName: plan.modelName || '',
            application: plan.application || '',
            quantity: plan.quantity || '',
            unitPrice: plan.unitPrice || '',
            lumpSum: plan.lumpSum || '',
            orderTime: plan.orderTime || '',
            remark: plan.remark || '',
            createUserName: plan.createUserName || '',
            updateTime: plan.updateTime || '',
            updateUserName: plan.updateUserName || '',
            createTime: plan.createTime || '',
            updateUserGroup: plan.updateUserGroup || '',
            createUserGroup: plan.createUserGroup || '',
            attachmentList: plan.attachmentList || [],
            logList: plan.logList || [],
          };
        }
      },
    },
    // addState: {
    //   handler(val) {
    //     console.log('val: ', val);
    //     if (val) {
    //       this.titleName = '新增订单';
    //       this.color = 'red';
    //       this.iconName = 'New';
    //     }
    //   },
    //   immediate: true,
    // },
    titleInfo: {
      handler(val) {
        this.titleName = val.titleName;
        this.color = val.color;
        this.iconName = val.iconName;
      },
      deep: true,
    },
  },
  created() {},
  methods: {
    async edit() {
      console.log('??????????');
      this.titleName = '编辑订单';
      this.color = 'blue';
      this.iconName = 'Edit';
      this.isSave = true;
      this.$emit('update:addState', true);
      this.isEdit = false;
    },

    clearList() {
      this.saleList = [];
    },
    onClose() {
      this.titleName = '订单详情';
      this.color = 'green';
      this.iconName = 'Det';
      this.form = { ...defaultForm };
      this.isEdit = false;
      this.deleteFileId = [];
      this.isGetInfo = false;
      this.$emit('update:isFoot', false);
      this.$emit('update:visible', false);
      this.$emit('fresh');
    },

    async saveCallback() {
      if (this.deleteFileId.length) {
        const result = await postDeleteFile(this.deleteFileId);
        this.deleteFileId = [];
      }
      const valid = await this.$refs.form.validate();
      if (!valid) return new Promise(() => {});
      const formInfo = JSON.parse(JSON.stringify(this.$refs.form.form));
      if (!this.$refs.form.list.length) {
        formInfo.attachmentList = [];
      }
      formInfo.salesGroupName =
        this.$refs.form.GroupOptions[formInfo.salesGroupCode];
      formInfo.attachmentList = this.$refs.form.fileList;
      if (this.isSave) {
        formInfo.updateUserGroup = this.$refs.form.currentUserOrg;
        formInfo.updateUserName = this.$refs.form.currentUser;
        const result = await postAddOrder(formInfo);
        if (result.data.code === 0) {
          this.$message.success('保存成功！');
          this.closeCallback();
          this.isSave = false;
        }
      } else {
        formInfo.createUserGroup = this.$refs.form.currentUserOrg || '';
        formInfo.updateUserGroup = this.$refs.form.currentUserOrg || '';
        formInfo.updateUserName = this.$refs.form.currentUser || '';
        const result = await postAddOrder(formInfo);
        if (result.data.code === 0) {
          this.$message.success('保存成功！');
          this.closeCallback();
          this.isSave = false;
        }
      }

      // const serialNumber = result?.data?.data?.serialNumber;
      // this.planIdNew = result?.data?.data?.id;
      // this.$refs.form.setForm(serialNumber);
    },
    closeCallback() {
      this.onClose();
    },
    handleButtonClick(key) {
      const fn = `${key}Callback`;
      this[fn] && this[fn]();
    },
  },
};
</script>
<style lang="less" scoped>
.edit {
  position: absolute;
  top: 10px;
  right: 30px;
}
</style>


